/* 设置整个页面的高度为100% */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 设置上下两个部分各占页面高度的一半 */


/* 可以根据需要添加样式 */
.top-section {
    height: 30%;
    background-color: lightblue;
}

.bottom-section {
    height: 70%;
    background-color: lightgray;
}
.top-section .horizontal-list {
    list-style: none; /* 移除默认的列表样式 */
    padding: 0; /* 移除默认的内边距 */
}

.top-section .horizontal-list li {
    display: inline-block; /* 将列表项横向排列 */
    margin-right: 10px; /* 设置列表项之间的右侧间距 */
}
.bottom-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
  }
  
  .sub-section {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
  }
  
  .content {
    width: 100%;
    height: 100%;
    text-align: center;
  }